<template>
  <div>
    <RightBox />
    <orderBox
      :tabledata="tableData"
      :pagetotal="pageTotal"
      @tabEvent="handleClick($event)"
      @pageEvent="pageClick($event)"
      @theRefresh="theRefresh($event)"
      @goDetail="goDetail"
    />
    <!-- <div class="cainixihuan">
      猜你喜欢
    </div>
    <FruitList :is-third="true" /> -->
  </div>
</template>
<script>
// @ is an alias to /src

import RightBox from "../../components/person/right_box.vue";
import orderBox from "../../components/person/order_box.vue";

export default {
  components: {
    RightBox,
    // FruitList,
    orderBox,
  },
  data() {
    return {
      status: "", // 状态
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      pageTotal: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // tab切换数据
    handleClick(handleClick) {
      console.log("接收数据", handleClick);
      this.pageIndex = 1;
      this.pageSize = 10;
      this.status = handleClick;
      this.getData(this.status);
    },
    // 分页
    pageClick(pageClick) {
      console.log("接收分页数据", pageClick);
      this.pageIndex = pageClick;
      this.getData(this.status);
    },
	// 各种操作后刷新
	theRefresh(theRefresh){
		console.log('各种操作后刷新',theRefresh)
		this.status = theRefresh;
		this.getData(this.status)
	},
    //获取订单列表
    getData(handleClick) {
      console.log("asasasa", handleClick);
      let params = {
        token: localStorage.getItem("token"),
        onLineOffLine: "0",
        orderType: "2",
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        status: handleClick,
      };
      this.$api.person.getUserOrders(params).then((res) => {
        if (res.code == 200) {
          console.log("获取订单列表1111", res.data);
          this.tableData = res.data.orders; // 订单列表
          this.pageTotal = res.data.count; // 总条目数
        }
      });
    },
    //跳转详情
    goDetail() {
      this.$router.push({
        path: "/person/orderDetail",
        params: {
          goods: 1,
        },
      });
    },
  },
};
</script>
<style lang="scss">
.contain {
  padding: 7.75rem 0 0;
  width: 87.55rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  background-color: #eaeaea;
  justify-content: space-between;
  .rights {
    .imgBox {
      text-align: right;
      margin-bottom: 2.63rem;
    }
    > img {
      object-fit: contain;
    }
  }
  .rightBoxs {
    width: 65.21rem;
    .active {
      .cate-item {
        width: 20.62rem;
        height: 28.13rem;
        background: rgba(255, 255, 255, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
        margin-bottom: 1.88rem;
        margin-right: 1.59rem;
        &:nth-child(3n) {
          margin-right: 0 !important;
        }

        &:nth-child(3n + 1) {
          margin-right: 1.59rem !important;
        }

        &:hover {
          -webkit-box-shadow: 0px 3px 3px #c8c8c8;
          -moz-box-shadow: 0px 3px 3px #c8c8c8;
          box-shadow: 0px 3px 3px #c8c8c8;
        }
      }
    }
  }
}
</style>
